<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';
import type { WorkbenchQuickNavItem, WorkbenchProductsItem } from './typing';
import type { TablePaginationConfig } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { reactive, ref, onMounted, computed} from 'vue';

import {
  AnalysisChartCard,
  WorkbenchHeader,
  WorkbenchProject,
  WorkbenchTodo,
  WorkbenchTrends,
} from '@vben/common-ui';
import  WorkbenchQuickNav from './component/workbench-quick-nav.vue';
import  WorkbenchProducts from './component/workbench-products.vue';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
import type { MinishopSpu } from '../../uctoo/minishop_spu/types.ts';
import { uctoo_minishop_spu, uctoo_config } from '#/store';
import { useRepo } from 'pinia-orm';
import { useAxiosRepo } from '@pinia-orm/axios';


defineOptions({ name: 'Login' });

const userStore = useUserStore();

const projectItems: WorkbenchProjectItem[] = [
  {
    color: '',
    content: 'APP、小程序、API、代码生成、代码管理',
    date: '',
    group: '',
    icon: 'carbon:logo-github',
    title: '开发管理',
  },
  {
    color: '#3fb27f',
    content: '公众号、抖音、小红书，线上线下活动，私域聚合',
    date: '',
    group: '',
    icon: 'ion:logo-vue',
    title: '信息流量',
  },
  {
    color: '#e18525',
    content: '后台用户、微信用户、APP用户、访客用户',
    date: '',
    group: '',
    icon: 'ion:logo-html5',
    title: 'CRM',
  },
  {
    color: '#bf0c2c',
    content: 'AI辅助',
    date: '',
    group: '',
    icon: 'ion:logo-angular',
    title: '人工智能',
  },
  {
    color: '#00d8ff',
    content: '多终端、分组权限、按需实时查看',
    date: '',
    group: '',
    icon: 'bx:bxl-react',
    title: '数据看板',
  },
  {
    color: '#EBD94E',
    content: '商品管理、订单管理、物流管理、资金管理',
    date: '',
    group: '',
    icon: 'ion:logo-javascript',
    title: '微小店',
  },
];

const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: 'mdi:database',
    title: '数据库连接',
    url: '/system/db_connection',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '微小店管理',
    url: '/database/minishop_spu',
  },
  {
    color: '#3fb27f',
    icon: 'ion:settings-outline',
    title: '系统管理',
    url: '/database/config',
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:key-outline',
    title: '权限管理',
    url: '/database/permissions',
  },
  {
    color: '#00d8ff',
    icon: 'ion:bar-chart-outline',
    title: '开发管理',
    url: '/database/codelabs',
  },
  ];
  const productsItems: WorkbenchProductsItem[] = [
  { id: 1, name: '产品1', description: '描述1', image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
        { id: 2, name: '产品2', description: '描述2', image: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  ];

const todoItems = ref<WorkbenchTodoItem[]>([
  {
    completed: false,
    content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
    date: '2024-07-30 11:00:00',
    title: '审查前端代码提交',
  },
  {
    completed: true,
    content: `检查并优化系统性能，降低CPU使用率。`,
    date: '2024-07-30 11:00:00',
    title: '系统性能优化',
  },
  {
    completed: false,
    content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
    date: '2024-07-30 11:00:00',
    title: '安全检查',
  },
  {
    completed: false,
    content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
    date: '2024-07-30 11:00:00',
    title: '更新项目依赖',
  },
  {
    completed: false,
    content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
    date: '2024-07-30 11:00:00',
    title: '修复UI显示问题',
  },
]);
const trendItems: WorkbenchTrendItem[] = [
  {
    avatar: 'svg:avatar-1',
    content: `小程序用户 <a href="#/database/wechatopen_miniapp_users" target="_blank">patrick</a> 提交了认证申请，请 <a href="#/database/minishop_store_apply" target="_blank">审核</a>`,
    date: '刚刚',
    title: '威廉',
  },
  {
    avatar: 'svg:avatar-2',
    content: `公众号用户 <a href="#/database/wechatopen_users" target="_blank">demo</a> 提交了认证申请，请 <a href="#/database/minishop_store_apply" target="_blank">审核</a> `,
    date: '1个小时前',
    title: '艾文',
  },
  {
    avatar: 'svg:avatar-3',
    content: `APP用户 <a href="#/database/uctoo_user" target="_blank">小明</a> 报名了开发者活动，请 <a href="#/database/user_sign" target="_blank">审核</a> `,
    date: '1天前',
    title: '小明',
  },
  {
    avatar: 'svg:avatar-3',
    content: `APP用户 <a href="#/database/uctoo_user" target="_blank">天天</a> 购买了企业版license，请 <a href="#/database/minishop_order" target="_blank">跟进</a> 订单`,
    date: '1天前',
    title: '小明',
  },
];
const spuDataSource = ref<MinishopSpu[]>([]);
const minishopSpuRepo = computed(() => {
  return useRepo(uctoo_minishop_spu)
});

onMounted(async () => {
      await useAxiosRepo(uctoo_minishop_spu).api().getuctooMinishopSpuList(0, 9, {});
      spuDataSource.value = minishopSpuRepo.value.all() as unknown as MinishopSpu[];

});
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
      {{ userStore.userInfo?.username }} 开始您一天的工作吧！
      </template>
      <template #description>  </template>
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchProject :items="projectItems" title="功能域" />
        <WorkbenchProducts :items="spuDataSource" title="应用市场" />
      <!--  <WorkbenchTrends :items="trendItems" class="mt-5" title="待办事项" /> -->
      </div>
      <div class="w-full lg:w-2/5">
         <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
        <!--   <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />-->
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource />
        </AnalysisChartCard>
      </div>
    </div>
  </div>
</template>
